<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>我的购物车</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--css文件-->
    <jsp:include page="common/common-css.jsp" />
</head>
<body>

<jsp:include page="common/common-mobileButton.jsp" />

<div class="main-wrapper">
    <!--页面导航栏组件-->
    <jsp:include page="common/common-header.jsp" />

    <main class="main-content">

        <div align="center">
            <h3 class="breadcrumb-heading">我的购物车</h3>
        </div>

        <div class="cart-area section-space-y-axis-100">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="table-content table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th class="product-thumbnail">预览图</th>
                                    <th class="cart-product-name">商品名称</th>
                                    <th class="product-price">单件价格</th>
                                    <th class="product-quantity">数量</th>
                                    <th class="product-subtotal">金额</th>
                                    <th class="product_remove">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${order.itemMap}" var="item">
                                    <tr>
                                        <td class="product-thumbnail" style="height: 124px; width: 112px">
                                            <a href="/bookmall/detail/${item.value.book.id}" target="_blank">
                                                <img src="${item.value.book.cover}" alt="${item.value.book.name}">
                                            </a>
                                        </td>
                                        <td class="product-name">
                                            <a href="/bookmall/detail/${item.value.book.id}" target="_blank">
                                                    ${item.value.book.name}
                                            </a>
                                        </td>
                                        <td class="product-price">
                                            <span class="amount">¥ ${item.value.price}</span>
                                        </td>

                                        <td class="quantity">
                                            <div class="cart-plus-minus">
                                                <!--数量-->
                                                <input class="cart-plus-minus-box" value="${item.value.amount}" type="text" readonly="readonly">
                                                <!--减少-->
                                                <div class="dec qtybutton">
                                                    <i class="fa fa-minus" onclick="lessen(${item.key});"></i>
                                                </div>
                                                <!--增加-->
                                                <div class="inc qtybutton">
                                                    <i class="fa fa-plus" onclick="buy(${item.key});"></i>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="product-subtotal">
                                            <span class="amount">¥
                                                <fmt:formatNumber type="number" value="${(item.value.amount * item.value.price)}" pattern="#.00" />
                                            </span>
                                        </td>
                                        <td class="product_remove">
                                            <a class="product-item_remove" href="javascript:"
                                               onclick="deletes(${item.key});">
                                                <i class="pe-7s-close" data-tippy="删除"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>

                        <div class="row">
                            <div class="col-md-5 ml-auto">
                                <div class="cart-page-total">
                                    <h2>购物车总金额</h2>
                                    <ul>
                                        <li>总金额 <span>¥ ${order.total}</span></li>
                                    </ul>
                                    <a href="/bookmall/order/submit">结算</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
    <!--页尾-->
    <jsp:include page="footer.jsp" />
</div>

<!--js文件-->
<jsp:include page="common/common-js.jsp" />
</body>
</html>
